<template>
  <div>
       <footer>
      <ul>
        <router-link to="/mall" tag="li">
          <span class="iconfont">&#xe663;</span>
          <p>商城</p>
        </router-link>
        <router-link to="/class" tag="li">
          <span class="iconfont">&#xe611;</span>
          <p>分类</p>
        </router-link>
        <router-link to="/scar" tag="li">
          <span class="iconfont">&#xe612;</span>
          <p>购物车</p>
        </router-link>
        <router-link to="/person" tag="li">
          <span class="iconfont">&#xe625;</span>
          <p>我</p>
        </router-link>
      </ul>
    </footer>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
};
</script>

<style scoped>
footer {
  width: 100%;
  height: 1.62rem;
  position: fixed;
  left: 0;
  background: #fff;
  bottom: 0;
}
footer ul {
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: space-around;
}
footer ul li {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  text-align: center;
  justify-content: center;
}
footer ul li .iconfont {
  font-size: 0.4rem;
}
footer ul li p {
  color: #999999;
  font-size: 0.2rem;
}
footer ul li:hover {
  color: #FF6040;
  font-weight: bold;
}
</style>
